<template>
  <j-page ref="page" title="打印状态">
    <view class="page">
      <view class="flex_center">
        <u-circle-progress active-color="#2979ff" :percent="(printState+1)*10" width="400" border-width="30" bg-color="transparent" :duration="4000">
          <view class="u-progress-content">
            <view class="u-progress-dot"></view>
            <text class='u-progress-info'>{{ getStateText }}</text>
          </view>
        </u-circle-progress>
      </view>
      <u-button>取消</u-button>
    </view>
    <u-modal v-model="showSelectPrintParameters" title="打印选项" :show-confirm-button="false">
      <selectPrintParameters @confirm="selectPrintParametersConfirm"/>
    </u-modal>
  </j-page>
</template>

<script>
import {selectPrintParameters} from "./components/selectPrintParameters"
export default {
  name: "State",
  components:{selectPrintParameters},
  data(){
    return{
      socketTask:null,
      //1未上传，2正在上传，3上传完成，未扫码，4上传完成，已扫码，
      //5：打印任务已提交，等待后台处理文件，6正在填写打印参数，7打印参数已发送，8正在打印，9打印完成
      printState: 1,
      printerId: 1,//打印机编号
      fileId: 1,//文件编号
      showSelectPrintParameters:false,//是否显示选择打印参数弹框
    }
  },
  computed:{
    getStateText(){
      switch (this.printState){
        case 1: return '等待上传文件'
        case 2: return '文件正在上传'
        case 3: return '文件上传完成'
        case 4: return '打印机扫码完成'
        case 5: return '正在处理文件'
        case 6: return '正在填写打印参数'
        case 7: return '准备打印'
        case 8: return '正在打印'
        case 9: return '打印完成'
      }
    },
    getPrintPlan(){
      switch (this.printState){
        case 1: return 0
        case 2: return 0
        case 3: return 0
        case 4: return 0
        case 5: return 10
        case 6: return 10
        case 7: return 20
        case 8: return 60
        case 9: return 100
      }
    }
  },
  methods:{
    selectPrintParametersConfirm(formData){
      this.showSelectPrintParameters = false
      //提交参数，准备打印阶段
      this.printState = 7
      setTimeout(()=>{
        //准备结束（可以打印），开始打印
        this.printState = 8
        setTimeout(()=>{
          this.printState = 9
        },3000)
      },200)
    }
  },
  onLoad(){
    //接收到文件编号和打印机的编号
    console.log(this.$Route);
    this.printerId = this.$Route.query.printerId
    this.fileId = this.$Route.query.fileId
    this.printState = 5
    //建立实时连接
    /*this.socketTask = uni.connectSocket({
      url: 'ws://192.168.1.104:8080/websocket/1',
      data: {id:this.uploadResponse.id},
      complete: ()=> {}
    });
    this.socketTask.onMessage((data)=>{
      console.log("onMessage",data);
    })
    this.socketTask.onError((data)=>{
      console.log("onError",data);
    })
    this.socketTask.onOpen((data)=>{
      console.log("onOpen",data);
    })*/
  },
  created(){
    setTimeout(() => {
      this.printState = 6
      this.showSelectPrintParameters = true
    },3000)
  }
}
</script>

<style scoped>
.page{
  width: 100%;
  height: 100%;
}

.flex_center{
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
</style>
